<template>
	<view>
		<view class="cut_box">
			<view v-for="(item,index) in changelist" :key="index" @click="choseItem(item,index)"
				:style="{color: choseIndex===index?'#3C9CFF':'#333' }">
				<u-image width="40rpx" height="40rpx" :src="choseIndex===index?item.ischose :item.image" />
				{{item.name}}
				<text v-if="index===0 && libreayTotal">（{{libreayTotal}}）</text>
				<text v-if="index===1 && outTotal">（{{outTotal}}）</text>
			</view>
		</view>
		<view class="choseTime">
			<uni-datetime-picker type="daterange" @change="choseTime" />
		</view>
		<!-- 入库管理 -->
		<view class="commodity_box" v-if="choseIndex===0">
			<urCard v-for="(item,index) in libreayList" :key="index" @clickEvent="getDetails(item,index)">
				<view class="putLibrary">
					<text>{{ $t('outEnter.InboundTime') }}</text>
					<view style="display: flex;align-items: center;">
						<text>{{item.date}}</text>
						<uni-icons type="right" size="20" />
					</view>
				</view>
				<view class="putLibrary">
					<text>{{  $t('outEnter.LibraryName')}}</text>
					<text>{{item.title}}</text>
				</view>
				<view class="putLibrary">
					<text>{{  $t('outEnter.InboundType')}}</text>
					<text :style="{color:item.gatherType.typeColor}">{{item.gatherType.newType}}</text>
				</view>
				<view class="putLibrary">
					<text>{{  $t('outEnter.InboundStatus')}}</text>
					<text :style="{color:item.gatherStaus.stauSColor}">{{item.gatherStaus.newStaus}}</text>
				</view>
				<view class="putLibrary" v-if="item.audit_name">
					<text>{{  $t('outEnter.InboundPersonnel')}}</text>
					<text>{{item.audit_name}}</text>
				</view>
			</urCard>
			<ur-movable @emitMovable="issueCondition"></ur-movable>
		</view>
		<!-- 出库管理 -->
		<view class="commodity_box" v-if="choseIndex===1">
			<urCard v-for="(item,index) in outList" :key="index" @clickEvent="getOutDetails(item,index)">
				<view class="putLibrary">
					<text>出库时间</text>
					<view style="display: flex;align-items: center;">
						<text>{{item.date}}</text>
						<uni-icons type="right" size="20" />
					</view>
				</view>
				<view class="putLibrary">
					<text>仓库名称</text>
					<text>{{item.title}}</text>
				</view>
				<view class="putLibrary">
					<text>出库类型</text>
					<text :style="{color:item.gatherType.typeColor}">{{item.gatherType.newType}}</text>
				</view>
				<view class="putLibrary">
					<text>出库状态</text>
					<text :style="{color:item.gatherStaus.stauSColor}">{{item.gatherStaus.newStaus}}</text>
				</view>
				<view class="putLibrary" v-if="item.audit_name">
					<text>出库人员</text>
					<text>{{item.audit_name}}</text>
				</view>
			</urCard>


		</view>

		<!-- 仓库 -->
		<Tabbar cureentPage='management'></Tabbar>
	</view>
</template>

<script>
	import {
		leave,
		choseLeave,
		enter,
		choseEnter
	} from '@/common/config/userFileImg.js'
	import Tabbar from '@/common/tabbar/tabbar.vue'
	import urCard from "@/components/urcard.vue"
	import urMovable from "@/common/urmovable.vue"
	import {
		warehouseIn,
		warehouseOut
	} from '@/api/library.js'
	export default {
		data() {
			return {
				choseIndex: 0,
				changelist: [{
					name: this.$t('outEnter.EnterLibrary'),
					image: leave,
					ischose: choseLeave
				}, {
					name:  this.$t('outEnter.LeaveLibrary'),
					image: enter,
					ischose: choseEnter
				}],
				// 入库参数
				bank: {
					page: 1,
					perPage: 10,
					date_start: '',
					date_end: '',
				},
				// 出库参数
				delivery: {
					page: 1,
					perPage: 10,
					date_start: '',
					date_end: '',
				},

				libreayList: [], //入库的数据列表
				outList: [], //出库的数据列表

				libreayTotal: null, //入库数量
				outTotal: null, //出库数量
				isHasNextPages: 0,
				outHasNextPages: 0,
			};
		},
		components: {
			urCard,
			Tabbar,
			urMovable
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('common.InAndOutOfStorage')
			})
			this.getWarehouseIn()
			this.getWarehouseOut()
		},
		onPullDownRefresh() {
			this.bank.page = 1
			this.libreayList = []
			this.getWarehouseIn()
			this.delivery.page = 1
			this.outList = []
			this.getWarehouseOut()

		},
		onReachBottom() {
			if (this.choseIndex) {
				// 出库
				if (this.outHasNextPages) {
					this.delivery.page += 1
					this.getWarehouseOut(true)
				}
			} else {
				// 入库
				if (this.isHasNextPages) {
					this.bank.page += 1
					this.getWarehouseIn(true)
				}
			}
		},
		methods: {
			choseItem(item, index) {
				this.choseIndex = index
			},
			// 入库检索时间
			choseTime(e) {
				console.log('maskClick事件:', e);
				this.bank.date_start = e[0]
				this.bank.date_end = e[1]
				this.getWarehouseIn()
				this.delivery.date_start = e[0]
				this.delivery.date_end = e[1]
				this.getWarehouseOut()
			},

			// 入库列表
			getWarehouseIn(a) {
				if (this.bank.date_start === undefined) {
					this.bank.date_start = ''
					this.bank.date_end = ''
				}
				warehouseIn(this.bank).then(res => {
					uni.stopPullDownRefresh()
					this.isHasNextPages = res.has_more
					this.libreayTotal = res.total
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								gatherType: this.newType(code), //入库类型
								gatherStaus: this.newStaus(code) //入库状态
							}
						})
					}
					if (a) {
						this.libreayList = [...this.libreayList, ...res.data];
						return
					}
					this.libreayList = res.data
					console.log('数据事件:', this.libreayList);
				})
			},
			// 出库列表
			getWarehouseOut(a) {
				if (this.delivery.date_start === undefined) {
					this.delivery.date_start = ''
					this.delivery.date_end = ''
				}

				warehouseOut(this.delivery).then(res => {
					console.log(res, '55554');
					this.outTotal = res.total
					this.outHasNextPages = res.has_more
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								gatherType: this.newType(code), //入库类型
								gatherStaus: this.newStaus(code) //入库状态
							}
						})
					}

					if (a) {
						this.outList = [...this.outList, ...res.data];
						return
					}
					this.outList = res.data
				})
			},
			newType(item) {
				// 2  销售退货入库 1 调拨入库 3 采购入仓
				let newType = ''
				let typeColor = ''
				if (item.type === 1) {
					newType =this.$t('outEnter.Allocate')
					typeColor = "#0156E9"
				} else if (item.type === 2) {
					newType = this.$t('outEnter.Return')
					typeColor = "#E9014D"
				} else {
					newType =this.$t('outEnter.Procurement')
					typeColor = "#0156E9"
				}
				return {
					newType,
					typeColor
				}
			},
			newStaus(item) {
				// 审核状态 0 待审核 1 通过 2 驳回 3作废
				let newStaus = ''
				let stauSColor = ''
				if (item.status === 1) {
					newStaus =this.$t('outEnter.Pass')
					stauSColor = "#309910"
				} else if (item.status === 2) {
					newStaus = this.$t('outEnter.Overrule')
					stauSColor = "#E9014D"
				} else if (item.status === 3) {
					newStaus = this.$t('outEnter.Void')
					stauSColor = "red"
				} else {
					newStaus = this.$t('outEnter.ToBeReviewed')
					stauSColor = "#FF7709"
				}
				return {
					newStaus,
					stauSColor
				}
			},
			// 创建入库
			issueCondition() {
				uni.navigateTo({
					url: '/pages/subpackage/management/establishLibrary'
				})

			},
			getDetails(item, index) {
				uni.navigateTo({
					url: '/pages/subpackage/management/establishLibrary?id=' + item.id
				})
			},
			getOutDetails(item, index) {
				uni.navigateTo({
					url: '/pages/subpackage/management/outDetails?id=' + item.id
				})

			}
		}
	}
</script>

<style lang="scss">
	.commodity_box {
		margin: auto;
		margin-top: 36rpx;
		padding: 0 20rpx;
		padding-bottom: 220rpx;
	}

	.choseTime {
		margin: auto;
		margin-top: 36rpx;
		padding: 0 20rpx;
	}


	.cut_box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		// background-color: aqua;

		>view {
			text-align: center;
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			position: relative;
			padding-top: 20rpx;
		}
	}

	.putLibrary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}
</style>